<template>
  <label class="radio-box">
    <input type="radio" name="aa" :disabled="isdisabled" :value="value" :checked="checked" @change="change">
    <div>
      <i class="check-icon"></i>
      <slot></slot>
    </div>
  </label>
</template>

<script>
export default {
  name: 'Radio',
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    checked () {
      // eslint-disable-line
      /* eslint-disable */
      return this.value == this.$parent.val
    },
    isdisabled () {
      return this.disabled || this.$parent.disabled
    }
  },
  methods: {
    change () {
      this.$parent.$emit('change', this.value)
    }
  }
}
</script>

<style lang="scss" scoped>
.radio-box {
  
  font-size: $font-size-m;
  margin-right: 20px;
  input {
    display: none;
  }
  & > div {
    @include flex(row, flex-start, center);
  }
  .check-icon {
    @include wh(30px, 30px);
    display: inline-block;
    border-radius: 100%;
    border: 1px solid #ccc;
    background: transparent;
    margin-right: 10px;
  }
  input:checked + div .check-icon {
    background: $base-color;
    border-color: $base-color;
  }
  input:disabled + div{
    opacity: 0.5;
  }
}
</style>
